<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box" >
      <h6 class="common-title">用户资料</h6>
      <div class="myorderbox common-form-set">
        <form action="" class="layui-form" onsubmit="return false;">
          <div class="layui-form-item">
            <label class="layui-form-label">用户编号</label>
            <div class="layui-input-inline" style="width:300px;">
              <input type="text" :value=user.localUserID autocomplete="off" class="layui-input layui-disabled" readonly="" disabled="">
            </div>
            <div class="layui-form-mid layui-word-aux">不可修改</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline" style="width:300px;">
              <input type="text" :value=user.userName autocomplete="off" class="layui-input layui-disabled" readonly="" disabled="">
            </div>
            <div class="layui-form-mid layui-word-aux">不可修改</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-inline" style="width:300px;">
              <input type="text" :value=user.login autocomplete="off" class="layui-input layui-disabled" readonly="" disabled="">
            </div>
            <div class="layui-form-mid layui-word-aux">不可修改</div>
          </div>
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">真实姓名</label>
                <div class="layui-input-inline" style="width:300px;">
                    <input type="text" value="" autocomplete="off" class="layui-input layui-disabled" readonly disabled>
                </div>

                <div class="layui-form-mid layui-word-aux"><a href="javascript:void(0);">您还未实名认证，前往实名</a></div>
                <div class="layui-form-mid layui-word-aux"><a href="javascript:void(0);">恭喜您已经完成实名认证！</a></div>
            </div> -->
          <div class="layui-form-item">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-inline" style="width:300px;">
              <input type="text" value="" placeholder="请输入您的手机号码" autocomplete="off" class="layui-input" >
            </div>
            <div class="layui-form-mid layui-word-aux">您还未绑定手机，<a href="http://235.sysd8.cn/ucenter/bindmobile.html" style="color:#ff0000">立即绑定</a></div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">公司/个人名称</label>
            <div class="layui-input-inline" style="width:300px;">
              <input type="text" value="" placeholder="请输入公司/个人名称" autocomplete="off" class="layui-input" >
            </div>
            <div class="layui-form-mid layui-word-aux">8个字符以内</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">电子邮箱</label>
            <div class="layui-input-inline" style="width:300px;">
              <input type="text" value="" placeholder="请输入您的电子邮箱" autocomplete="off" class="layui-input" >
            </div>
            <div class="layui-form-mid layui-word-aux">邮箱格式：登录名@主机名.域名</div>
          </div>

          <!-- <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline" style="width:300px;">
              <input type="text" name="company"  disabled="" :value=user.userName lay-verify="required" placeholder="请输入公司或个人名称" autocomplete="off" class="layui-input" onkeyup="checkStrLength(this.value)">
            </div>
            <div class="layui-form-mid layui-word-aux"></div>
          </div> -->

          <div class="layui-form-item">
            <label class="layui-form-label">联系Q Q</label>
            <div class="layui-input-inline" style="width:300px;" >
              <input  type="text" name="qq" v-model="userInfo.qq" lay-verify="required"  autocomplete="off" class="layui-input" onkeyup="checkQq(this.value)">
            </div>
            <div class="layui-form-mid layui-word-aux" >如未绑定安全项，将作为找回面凭证</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">联系地址</label>
            <div class="layui-input-inline" style="width:300px;">
              <input type="text" name="address" v-model="userInfo.address" placeholder="请输入您的联系地址" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">您的常用地址</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">注册时间</label>
            <div class="layui-input-inline" style="width:300px;">
              <input type="text" :value=user.regTime autocomplete="off" class="layui-input layui-disabled" >
            </div>
            <div class="layui-form-mid layui-word-aux">账户注册时的时间，不可编辑</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">验证交易密码</label>
            <div class="layui-input-inline" style="width:300px;">
              <input type="password" name="password" required="" lay-verify="required" value="" placeholder="请输入您的交易密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">请输入您的交易密码</div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
              <button
                class="layui-btn layui-btn-sm"
                @click.prevent="modify">
                修改资料
              </button>
            </div>
          </div>


<!--          <div class="layui-form-item">-->
<!--            <label class="layui-form-label"></label>-->
<!--            <div class="layui-input-block">-->
<!--              <button class="layui-btn layui-btn-sm" >修改资料</button>-->
<!--            </div>-->
<!--          </div>-->
        </form>
      </div>

    </div>
    <div class="common-usercenter-box" >
      <h6 class="common-title">安全管理</h6>
      <div class="common-table-box">
        <p class="safe" style="padding: 5px 50px;" @click="$router.push('/passwordModify4')">登录密码<button class="layui-btn layui-btn-sm" style="padding: 0px 16px; margin:0px 10px">立即修改</button></p>
      </div>
      <div class="common-table-box">
        <p class="safe" style="padding: 5px 50px;" @click="$router.push('/transactionPassword4')">交易密码<button class="layui-btn layui-btn-sm" style="padding: 0px 16px; margin:0px 10px">立即修改</button></p>
      </div>
    </div>
    <password-dialog ref="pwd"></password-dialog>
    <trade-password-dialog
      ref="tpwd"
      :has-trade-pwd="hasTradePwd"
    ></trade-password-dialog>
    </div>

</template>

<script>
import { mapState } from 'vuex'
import AccountDialog from '@/components/dialog/account'
import PasswordDialog from '@/components/dialog/password'
import TradePasswordDialog from '@/components/dialog/tradePassword'
import LoginLogDialog from '@/components/dialog/loginLog'

export default {
  layout: 'webIn4',
  components: {
    AccountDialog,
    PasswordDialog,
    TradePasswordDialog,
    LoginLogDialog
  },
  middleware: ['tradePwd'],
  data() {
    return {
      userInfo: {
        userID: '',
        userName: '',
        login: '',
        qq: '',
        address: '',
        // password: '',
      },

    }
  },
  mounted() {
    this.userInfo.userID = this.user.userID
    this.userInfo.userName = this.user.userName
    this.userInfo.login = this.user.login
    this.userInfo.qq = this.user.qq || ''
    this.userInfo.address = this.user.userArea || ''
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
      hasTradePwd: (state) => state.hasTradePwd
    })
  },
  methods: {
    async unbindQQ() {
      const res = await this.$axios.get('/user/oauth/unbind')
      if (res.code === 1001) {
        this.$message.success('解除QQ绑定成功')
        location.reload()
      }
    },
    async modify() {
      const res = await this.$axios.post('/user/user/update', this.userInfo)
      if (res.code === 1001) {
        this.$message.success('信息修改成功')
        location.reload()
      }
    }
  }
}
</script>

<style scoped>

</style>
<style lang="scss" scoped>
section {
  padding: 25px;
  background: white;
  h4 {
    line-height: 18px;
    padding: 10px 0;
    border-bottom: 1px solid $--basic-border-color;
    i {
      color: $--color-primary;
      margin-right: 10px;
      font-size: 18px;
    }
  }
  h4 + ul,
  h4 + div {
    padding: 15px;
  }
  ul {
    li {
      font-size: 14px;
      padding: 10px 0;
      & > span:first-child {
        width: 100px;
        text-align: right;
        margin-right: 10px;
        display: inline-block;
        color: $--color-primary;
      }
    }
  }

}
@import 'assets/style/el-adapter.css';
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
// @import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';
// @import 'element-ui/lib/theme-chalk/index.css';

.common-form-set .layui-form-label {
  min-width: 110px;
}
.layui-form-mid {
  font-size: 14px !important;
}
</style>
